﻿<!DOCTYPE html>
<html>
    <head>
		<title>jQuery/selectors</title>
        <meta charset="utf-8">
		<style>
			.syntax { color: red;}
			.colorRed {color: red;}
			.colorGreen {color: green;}
			.colorBlue {color: blue;}
            div {
                margin: 3px;
                width: 50px;
                height: 50px;
                /*position: absolute;*/
                left: 10px;
                top: 300px;
                background-color: yellow;
                /*display:none;*/
            }
            div.newcolor {
                background-color: red;
            }
  		</style>
        <script src="script/jquery-3.5.1.js"></script>
        <script>
		    console.log( "jQuery version: " + $.fn.jquery );
        </script>
    </head>
    <body>
        <h1>jQuery/selectors部分展示</h1>		
		<table>
            <tr>
                <td class="syntax">"*"</td>
                <td>Select all elements.</td>
            </tr>
            <tr>
                <td class="syntax">:animated</td>
                <td>Select all elements that are in the progress of an animation at the time the selector is run.</td>
            </tr>
            <tr>
                <td class="syntax">[name|="value"]</td>
                <td>Selects elements that have the specified attribute with a value either equal to a given string or starting with that string followed by a hyphen (-).</td>
            </tr>
            <tr>
                <td class="syntax">[name*=”value”]</td>
                <td>Selects elements that have the specified attribute with a value containing a given substring.</td>
            </tr>
            <tr>
                <td class="syntax"> [name~=”value”]</td>
                <td>Selects elements that have the specified attribute with a value containing a given word, delimited by spaces.</td>
            </tr>
            <tr>
                <td class="syntax"> [name$=”value”]</td>
                <td>Selects elements that have the specified attribute with a value ending exactly with a given string. The comparison is case sensitive.</td>
            </tr>
            <tr>
                <td class="syntax">[name=”value”]</td>
                <td>Selects elements that have the specified attribute with a value exactly equal to a certain value.</td>
            </tr>
            <tr>
                <td class="syntax">[name!=”value”]</td>
                <td>Select elements that either don’t have the specified attribute, or do have the specified attribute but not with a certain value.</td>
            </tr>
            <tr>
                <td class="syntax">[name^=”value”]</td>
                <td>Selects elements that have the specified attribute with a value beginning exactly with a given string.</td>
            </tr>
            <tr>
                <td class="syntax">:button</td>
                <td>Selects all button elements and elements of type button.</td>
            </tr>
            <tr>
                <td class="syntax">:checkbox</td>
                <td>Selects all elements of type checkbox.</td>
            </tr>
            <tr>
                <td class="syntax">:checked</td>
                <td>Matches all elements that are checked or selected.</td>
            </tr>
            <tr>
                <td class="syntax">"parent > child"</td>
                <td>Selects all direct child elements specified by “child” of elements specified by “parent”.</td>
            </tr>
            <tr>
                <td class="syntax">".class"</td>
                <td>Selects all elements with the given class.</td>
            </tr>
            <tr>
                <td class="syntax">:contains()</td>
                <td>Select all elements that contain the specified text.</td>
            </tr>
            <tr>
                <td class="syntax">"ancestor descendant"</td>
                <td>Selects all elements that are descendants of a given ancestor.</td>
            </tr>
            <tr>
                <td class="syntax">:disabled</td>
                <td>Selects all elements that are disabled.</td>
            </tr>
            <tr>
                <td class="syntax">"element"</td>
                <td>Selects all elements with the given tag name.</td>
            </tr>
            <tr>
                <td class="syntax">:empty</td>
                <td>Select all elements that have no children (including text nodes).</td>
            </tr>
            <tr>
                <td class="syntax">:enabled</td>
                <td>Selects all elements that are enabled.</td>
            </tr>
            <tr>
                <td class="syntax">:eq()</td>
                <td>Select the element at index n within the matched set.</td>
            </tr>
            <tr>
                <td class="syntax">:even</td>
                <td>Selects even elements, zero-indexed. See also :odd.</td>
            </tr>
            <tr>
                <td class="syntax">:file</td>
                <td>Selects all elements of type file.</td>
            </tr>
            <tr>
                <td class="syntax">:first-child</td>
                <td>Selects all elements that are the first child of their parent.</td>
            </tr>
            <tr>
                <td class="syntax">:first-of-type</td>
                <td>Selects all elements that are the first among siblings of the same element name.</td>
            </tr>
            <tr>
                <td class="syntax">:first</td>
                <td>Selects the first matched DOM element.</td>
            </tr>
            <tr>
                <td class="syntax">:focus</td>
                <td>Selects element if it is currently focused.</td>
            </tr>
            <tr>
                <td class="syntax">:gt()</td>
                <td>Select all elements at an index greater than index within the matched set.</td>
            </tr>
            <tr>
                <td class="syntax">[name]</td>
                <td>Selects elements that have the specified attribute, with any value.</td>
            </tr>
            <tr>
                <td class="syntax">:has()</td>
                <td>Selects elements which contain at least one element that matches the specified selector.</td>
            </tr>
            <tr>
                <td class="syntax">:header</td>
                <td>Selects all elements that are headers, like h1, h2, h3 and so on.</td>
            </tr>
            <tr>
                <td class="syntax">:hidden</td>
                <td>Selects all elements that are hidden.</td>
            </tr>
            <tr>
                <td class="syntax">"#id"</td>
                <td>Selects a single element with the given id attribute.</td>
            </tr>
            <tr>
                <td class="syntax">:image</td>
                <td>Selects all elements of type image.</td>
            </tr>
            <tr>
                <td class="syntax">:input</td>
                <td>Selects all input, textarea, select and button elements.</td>
            </tr>
            <tr>
                <td class="syntax">:lang()</td>
                <td>Selects all elements of the specified language.</td>
            </tr>
            <tr>
                <td class="syntax">:last-child</td>
                <td>Selects all elements that are the last child of their parent.</td>
            </tr>
            <tr>
                <td class="syntax">:last-of-type</td>
                <td>Selects all elements that are the last among siblings of the same element name.</td>
            </tr>
            <tr>
                <td class="syntax">:last</td>
                <td>Selects the last matched element.</td>
            </tr>
            <tr>
                <td class="syntax">:lt()</td>
                <td>Select all elements at an index less than index within the matched set.</td>
            </tr>
            <tr>
                <td class="syntax">[name="value"][name2="value2"]</td>
                <td>Matches elements that match all of the specified attribute filters.</td>
            </tr>
            <tr>
                <td class="syntax">"selector1, selector2, selectorN"</td>
                <td>Selects the combined results of all the specified selectors.</td>
            </tr>
            <tr>
                <td class="syntax">"prev + next"</td>
                <td>Selects all next elements matching “next” that are immediately preceded by a sibling “prev”.</td>
            </tr>
            <tr>
                <td class="syntax">"prev ~ siblings"</td>
                <td>Selects all sibling elements that follow after the “prev” element, have the same parent, and match the filtering “siblings” selector.</td>
            </tr>
            <tr>
                <td class="syntax">:not()</td>
                <td>Selects all elements that do not match the given selector.</td>
            </tr>
            <tr>
                <td class="syntax">:nth-child()</td>
                <td>Selects all elements that are the nth-child of their parent.</td>
            </tr>
            <tr>
                <td class="syntax">:nth-last-child()</td>
                <td>Selects all elements that are the nth-child of their parent, counting from the last element to the first.</td>
            </tr>
            <tr>
                <td class="syntax">:nth-last-of-type()</td>
                <td>Selects all the elements that are the nth-child of their parent in relation to siblings with the same element name, counting from the last element to the first.</td>
            </tr>
            <tr>
                <td class="syntax">:nth-of-type()</td>
                <td>Selects all elements that are the nth child of their parent in relation to siblings with the same element name.</td>
            </tr>
            <tr>
                <td class="syntax">:odd</td>
                <td>Selects odd elements, zero-indexed. See also :even.</td>
            </tr>
            <tr>
                <td class="syntax">:only-child</td>
                <td>Selects all elements that are the only child of their parent.</td>
            </tr>
            <tr>
                <td class="syntax">:only-of-type</td>
                <td>Selects all elements that have no siblings with the same element name.</td>
            </tr>
            <tr>
                <td class="syntax">:parent</td>
                <td>Select all elements that have at least one child node (either an element or text).</td>
            </tr>
            <tr>
                <td class="syntax">:password</td>
                <td>Selects all elements of type password.</td>
            </tr>
            <tr>
                <td class="syntax">:radio</td>
                <td>Selects all elements of type radio.</td>
            </tr>
            <tr>
                <td class="syntax">:reset</td>
                <td>Selects all elements of type reset.</td>
            </tr>
            <tr>
                <td class="syntax">:root</td>
                <td>Selects the element that is the root of the document.</td>
            </tr>
            <tr>
                <td class="syntax">:selected</td>
                <td>Selects all elements that are selected.</td>
            </tr>
            <tr>
                <td class="syntax">:submit</td>
                <td>Selects all elements of type submit.</td>
            </tr>
            <tr>
                <td class="syntax">:target</td>
                <td>Selects the target element indicated by the fragment identifier of the document’s URI.</td>
            </tr>
            <tr>
                <td class="syntax">:text</td>
                <td>Selects all input elements of type text.</td>
            </tr>
            <tr>
                <td class="syntax">:visible</td>
                <td>Selects all elements that are visible.</td>
            </tr>
        </table>
        <p></p>
    <hr/>
    请打开console观察输出.
    
    </body>
</html>
